<template>
    <div class="sy">首页</div> 
    <div class="nr">
          <el-button type="warning">推荐</el-button>||
          <router-link to="/users"><el-button type="warning"  plain>书城</el-button></router-link>||
          <router-link to="/cart"><el-button type="warning"  plain>我的</el-button></router-link>
    </div>   
    <p style="padding-right: 305px;">正在热售</p>
 <div class="shell">
  <div>
    <a href="/src/lbtwz/tgcf.html">
      <img src="/public/lsp/tgcf.jpg" alt="" style="width: 100px;">
    </a>
  </div>
  <div>
    <a href="/src/lbtwz/cnjs.html">
      <img src="/public/lsp/cnjs.jpg" alt="" style="width: 102px">
    </a>
  </div>
  <div>
    <a href="/src/lbtwz/xwz.html">
      <img src="/public/lsp/xwz.png" alt="" style="width: 102px">
    </a>
  </div>
  <div>
    <a href="/src/lbtwz/zgn.html">
      <img src="/public/lsp/zgn.png" alt="" style="width: 102px">
    </a>
  </div>
  
 </div>

 <div style="position: relative; left: -150px;top: 20px;">
  其他好书
 </div>
 <div class="shell" style="position: relative; top: 40px;">
  <div>
    <a href="/src/lbtwz/sbdm.html">
      <img src="/public/lsp/xxr.png" alt="" style="width: 106px;">
    </a>
  </div>

  <div>
    <a href="/src/lbtwz/sbdm.html">
      <img src="/public/lsp/mg.png" alt="" style="width: 100px;">
    </a>
  </div>

  <div>
    <a href="/src/lbtwz/sbdm.html">
      <img src="/public/lsp/ql.png" alt="" style="width: 105px;">
    </a>
  </div>

  <div>
    <a href="/src/lbtwz/sbdm.html">
      <img src="/public/lsp/jy.png" alt="" style="width: 97px;">
    </a>
  </div>

  <div>
    <a href="/src/lbtwz/sbdm.html">
      <img src="/public/lsp/hlbt.png" alt="" style="width: 100px;">
    </a>
  </div>
 </div>

</template>

<script setup>

</script>

<style scoped>
.sy{
    font-size: 20px;
    padding-top: 50px;
    height: 50px;
    background:linear-gradient(to bottom,rgb(254, 159, 7),rgb(240, 222, 149)) ;
}
.nr{
    padding-top: 5px;
}
.kp{
    background:linear-gradient(to bottom,rgb(254, 159, 7),rgb(240, 222, 149)) ;
    max-width: 160px;
}
.shell{
  overflow-x: auto;
  display: flex;
  align-items: start;
  padding: 15px;
}
.shell>div{
  block-size: 110px;
  aspect-ratio: 1;
}
::-webkit-scrollbar{
  width: 1px;
  height: 2px;
}
::-webkit-scrollbar-track{
  background-color: rgba(136, 146, 146, 0.199);
}
::-webkit-scrollbar-thumb{
  background-color: #2f2c2c6e;
  border-radius: 10px;
}
</style>